<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: #368;line-height: 60px">
        <h1 style="color: white;font-size: 30px;margin: 0">烘焙坊后台管理系统
          <span style="font-size: 20px;float: right">欢迎{{user.nickname}}回来!
            <el-button @click="logout()">退出登录</el-button>
          </span>
        </h1>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu style="height: 100%" router active-text-color="orange" default-active="/admin/user">
            <img src="/imgs/icon.png" style="width:150px;margin: 20px">
            <el-menu-item index="/admin/user">
              <el-icon><User/></el-icon>用户管理
            </el-menu-item>
            <el-menu-item index="/admin/banner">
              <el-icon><Picture/></el-icon>轮播图管理
            </el-menu-item>
            <el-menu-item index="/admin/content">
              <el-icon><ChatDotSquare/></el-icon>内容管理
            </el-menu-item>
          </el-menu>

        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup>
import {ref} from "vue";
import router from "@/router";

const user = ref(localStorage.user?JSON.parse(localStorage.user):null);
const logout = ()=>{
  if (confirm("您确认退出登录吗?")){
    localStorage.clear();
    router.push('/');
  }
}
</script>

<style scoped>

</style>